<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <!-- 条件 -->
      <div class="table-page-search-wrapper">
        <a-form-model layout="inline" :model="queryParams" ref="queryFormRef">
          <a-row :gutter="16">
            <a-col :sm="24" :md="12" :lg="8" :xl="6">
              <a-form-model-item label="菜单名称" prop="menuName">
                <a-input v-model="queryParams.menuName" placeholder="请输入菜单名称" allow-clear/>
              </a-form-model-item>
            </a-col>
            <a-col :sm="24" :md="12" :lg="8" :xl="6">
              <a-form-model-item label="路由地址" prop="path">
                <a-input v-model="queryParams.path" placeholder="请输入路由地址" allow-clear/>
              </a-form-model-item>
            </a-col>
            <a-col :sm="24" :md="12" :lg="8" :xl="6">
              <a-form-model-item label="组件路径" prop="component">
                <a-input v-model="queryParams.component" placeholder="请输入组件路径" allow-clear/>
              </a-form-model-item>
            </a-col>
            <a-col :sm="24" :md="12" :lg="8" :xl="6" v-if="advanced">
              <a-form-model-item label="路由参数" prop="query">
                <a-input v-model="queryParams.query" placeholder="请输入路由参数" allow-clear/>
              </a-form-model-item>
            </a-col>
            <a-col :sm="24" :md="12" :lg="8" :xl="6" v-if="advanced">
              <a-form-model-item label="是否外链" prop="isFrame">
                <a-select v-model="queryParams.isFrame" placeholder="请选择是否外链" allow-clear>
                  <a-select-option :value="1">是</a-select-option>
                  <a-select-option :value="2">否</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :sm="24" :md="12" :lg="8" :xl="6" v-if="advanced">
              <a-form-model-item label="是否缓存" prop="isCache">
                <a-select v-model="queryParams.isCache" placeholder="请选择是否缓存" allow-clear>
                  <a-select-option :value="1">缓存</a-select-option>
                  <a-select-option :value="2">不缓存</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :sm="24" :md="12" :lg="8" :xl="6" v-if="advanced">
              <a-form-model-item label="菜单类型" prop="menuType">
                <a-select v-model="queryParams.menuType" placeholder="请选择菜单类型" allow-clear>
                  <a-select-option value="M">目录</a-select-option>
                  <a-select-option value="C">菜单</a-select-option>
                  <a-select-option value="F">按钮</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :sm="24" :md="12" :lg="8" :xl="6" v-if="advanced">
              <a-form-model-item label="菜单状态" prop="visible">
                <a-select v-model="queryParams.visible" placeholder="请选择菜单类型" allow-clear>
                  <a-select-option :value="1">显示</a-select-option>
                  <a-select-option :value="2">隐藏</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :sm="24" :md="12" :lg="8" :xl="6" v-if="advanced">
              <a-form-model-item label="权限标识" prop="perms">
                <a-input v-model="queryParams.perms" placeholder="请输入权限标识" allow-clear/>
              </a-form-model-item>
            </a-col>
            <a-col :sm="24" :md="12" :lg="8" :xl="6" v-if="advanced">
              <a-form-model-item label="菜单图标" prop="icon">
                <a-input v-model="queryParams.icon" placeholder="请输入菜单图标" allow-clear/>
              </a-form-model-item>
            </a-col>
            <a-col :sm="24" :md="12" :lg="8" :xl="6">
              <span class="table-page-search-submitButtons">
                <a-space>
                  <a-button type="primary" @click="handleQuery"><a-icon type="search"/>查询</a-button>
                  <a-button @click="handleReset"><a-icon type="redo"/>重置</a-button>
                  <a @click="advanced = !advanced">
                    {{ advanced ? '收起' : '展开' }}
                    <a-icon :type="advanced ? 'up' : 'down'"/>
                  </a>
                </a-space>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <!-- 按钮 -->
      <div class="table-operations">
        <a-button type="primary" icon="plus" @click="$refs.createForm.handleAdd()" v-has-permi="['system:sysPermission:save']">新增</a-button>
        <a-button type="primary" icon="menu-unfold" @click="$refs.importForm.handleImport()" v-has-permi="['system:sysPermission:import']">导入</a-button>
        <a-button type="primary" icon="download" @click="handleExport" v-has-permi="['system:sysPermission:export']">导出</a-button>
        <a-button type="danger" icon="delete" :disabled="multiple" @click="handleRemoveBatch" v-has-permi="['system:sysPermission:removeBatch']">批量删除</a-button>
        <table-setting
          :style="{float: 'right'}"
          :table-size.sync="tableSize"
          v-model="columns"
          :refresh-loading="loading"
          @refresh="getList"/>
      </div>
      <!-- 表格 -->
      <a-table
        :loading="loading"
        :size="tableSize"
        rowKey="id"
        :columns="columns"
        :data-source="sysPermissionList"
        :row-selection="{selectedRowKeys: selectedRowKeys, columnWidth:30, onChange: handleSelectRow}"
        :pagination="false"
        :bordered="tableBordered">
        <template v-slot:menuType="value, row">
          <span v-if="row.menuType == 'M'">目录</span>
          <span v-if="row.menuType == 'C'">菜单</span>
          <span v-if="row.menuType == 'F'">按钮</span>
        </template>
        <template v-slot:isFrame="value, row">
          <span>{{ ['', '是', '否'][row.isFrame] }}</span>
        </template>
        <template v-slot:isCache="value, row">
          <a-tag v-if="row.isCache == 1" color="green">缓存</a-tag>
          <a-tag v-else-if="row.isCache == 2" color="red">不缓存</a-tag>
        </template>
        <template v-slot:visible="value, row">
          <a-tag v-if="row.visible == 1" color="green">显示</a-tag>
          <a-tag v-else-if="row.visible == 2" color="red">隐藏</a-tag>
        </template>
        <template v-slot:operation="value, row">
          <a @click="$refs.createForm.handleUpdate(row)" v-has-permi="['system:sysPermission:update']"><a-icon type="edit"/>修改</a>
          <a-divider type="vertical"/>
          <a @click="$refs.createForm.handleAddNext(row)" v-has-permi="['system:sysPermission:save']"><a-icon type="plus"/>添加下级</a>
          <a-divider type="vertical"/>
          <a @click="handleRemove(row)" v-has-permi="['system:sysPermission:remove']"><a-icon type="delete"/>删除</a>
        </template>
      </a-table>
      <!-- 新增/修改 -->
      <create-form ref="createForm" @ok="getList"/>
      <!-- 导入 -->
      <import-form ref="importForm" @ok="getList"/>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import {tableMixin} from '@/store/table-mixin'
import CreateForm from './modules/CreateForm'
import ImportForm from './modules/ImportForm'
import {listSysPermission, removeSysPermission, removeBatchSysPermission, exportSysPermission} from '@/api/system/sysPermission'

export default {
  components: {
    CreateForm,
    ImportForm
  },
  mixins: [tableMixin],
  data() {
    return {
      sysPermissionList: [],
      selectedRowKeys: [],
      selectedRows: [],
      advanced: false,
      single: true,
      multiple: true,
      loading: false,
      total: 0,
      queryParams: {
        parentId: undefined,
        menuName: undefined,
        path: undefined,
        component: undefined,
        query: undefined,
        isFrame: undefined,
        isCache: undefined,
        menuType: undefined,
        visible: undefined,
        perms: undefined,
        icon: undefined
      },
      columns: [
        // {dataIndex: 'parentId', title: '父菜单ID', align: 'center'},
        // eslint-disable-next-line standard/object-curly-even-spacing
        {dataIndex: 'menuName', title: '菜单名称', align: 'left' },
        {dataIndex: 'icon', title: '菜单图标', align: 'center', scopedSlots: {customRender: 'icon'}},
        {dataIndex: 'path', title: '路由地址', align: 'left'},
        {dataIndex: 'component', title: '组件路径', align: 'left'},
        {dataIndex: 'query', title: '路由参数', align: 'center'},
        {dataIndex: 'menuType', title: '菜单类型', align: 'center', scopedSlots: {customRender: 'menuType'}},
        {dataIndex: 'isFrame', title: '是否外链', align: 'center', scopedSlots: {customRender: 'isFrame'}},
        {dataIndex: 'isCache', title: '是否缓存', align: 'center', scopedSlots: {customRender: 'isCache'}},
        {dataIndex: 'visible', title: '菜单状态', align: 'center', scopedSlots: {customRender: 'visible'}},
        {dataIndex: 'perms', title: '权限标识', align: 'left'},
        {dataIndex: 'sort', title: '排序', align: 'center'},
        {dataIndex: 'operation', title: '操作', align: 'center', width: '220', scopedSlots: {customRender: 'operation'}}
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true
      listSysPermission(this.queryParams).then(res => {
        this.sysPermissionList = this.handleTree(res.data)
        this.total = res.total
        this.loading = false
      })
    },
    /** 点击搜索 */
    handleQuery() {
      this.getList()
    },
    /** 点击重置 */
    handleReset() {
      this.$refs.queryFormRef.resetFields()
      this.handleQuery()
    },
    /** 选择行 */
    handleSelectRow(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    /** 点击删除 */
    handleRemove(row) {
      this.$confirm({
        title: '删除提示',
        content: '确认删除所选中数据?',
        onOk: () => {
          removeSysPermission(row.id).then(res => {
            this.$message.success(res.msg)
            this.getList()
          })
        }
      })
    },
    /** 点击批量删除 */
    handleRemoveBatch() {
      this.$confirm({
        title: '批量删除提示',
        content: '确认删除所选中数据?',
        onOk: () => {
          removeBatchSysPermission(this.selectedRowKeys).then(res => {
            this.$message.success(res.msg)
            this.getList()
          })
        }
      })
    },
    /** 点击导出 */
    handleExport() {
      this.$confirm({
        title: '导出提示',
        content: '确定导出当前条件下的所有数据吗?',
        onOk: () => {
          exportSysPermission(this.queryParams).then(res => {
            this.$message.success(res.msg)
          })
        }
      })
    }
  }
}
</script>
